<template>
  <span style="width:100%; display: flex; justify-content: space-between;align-items: center; font-size: 14px; padding-right: 8px;" @mousemove="hover" @mouseleave="leave">
    <span @click="WatchInfo(STORE,DATA,NODE)">
      <span>{{DATA.label}}</span>
    </span>
    <span class="span_icon" v-if='isHovering'>
      <el-button style="font-size: 12px;" type="text" v-if="DATA.addAble" @click="Append(STORE,DATA,NODE)">
        <i class="el-icon-plus"></i>
      </el-button>
      <el-button style="font-size: 12px;" type="text" v-if="DATA.WatchInfo" @click="WatchInfo(STORE,DATA,NODE)">
        <i class="el-icon-edit"></i>
      </el-button>
      <el-button style="font-size: 12px;" type="text" v-if="DATA.delAble" @click="Delete(STORE,DATA,NODE)">
        <i class="el-icon-delete"></i>
      </el-button>
    </span>
  </span>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      isHovering: false
    }
  },
  props: ['NODE', 'DATA', 'STORE'],
  methods: {
    // 鼠标hover
    hover () {
      this.isHovering = true
    },
    // 鼠标leave
    leave (node) {
      this.isHovering = false
    },
    Append (s, d, n) {
      // 添加节点事件
      this.$emit('Append', s, d, n)
    },
    Delete (s, d, n) {
      this.$emit('Delete', s, d, n)
    },
    WatchInfo (s, d, n) {
      this.$emit('WatchInfo', s, d, n)
    }
  }
}
</script>
<style></style>
